<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
<script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>
  <script src="https://unpkg.com/vue"></script>
	</head>
	<body>
		<div id="baseexample" >
			<p>Scroll down the page</p>
			<p v-pin="200">Stick me 200px from the top of the page</p>
		</div>
		<script type="text/javascript">
			/**
			 *动态指令参数
			指令的参数可以是动态的。例如，在 v-mydirective:[argument]="value" 中，
			argument 参数可以根据组件实例数据进行更新！这使得自定义指令可以在应用中被灵活使用。
			例如你想要创建一个自定义指令，用来通过固定布局将元素固定在页面上。
			我们可以像这样创建一个通过指令值来更新竖直位置像素值的自定义指令：
			 */
			Vue.directive('pin',{
				bind:function(el,binding,vnode){
					el.style.position='fixed'
					el.style.top=binding.value+'px'
				}
			})
			new Vue({
				el:'#baseexample',
				data:{
					message:'hello',
				}
			})
		</script>	
		<style type="text/css">
		</style>
	</body>
</html>
